<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>慕课网-弹出层</title>
    <style type="text/css">
        #close {
            background: url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat;
            width: 30px;
            height: 30px;
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 15px;
            text-indent: -999em;
        }

        #mask {
            background-color: #ccc;
            opacity: 0.5;
            filter: alpha(opacity=50);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
        }

        #login {
            position: fixed;
            z-index: 1001;
        }

        .loginCon {
            position: relative;
            width: 670px;
            height: 380px;
            background: url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="style/main.css" />
    <script>
        function openNew() {
            //获取页面的高度和宽度
            var page = document.documentElement ? document.documentElement : document.body;
            var page_w = page.scrollWidth;
            var page_h = page.scrollHeight;

            //创建一个遮罩层，设置ID为mask
            var mask = document.createElement("div");
            mask.id = "mask";

            //设置遮罩层的宽度和高度，使页面被完全遮罩。    
            mask.style.width = page_w+"px";
            mask.style.height = page_h+"px";

            //在页面里插入创建的遮罩层 
            document.body.append(mask);

            //获取页面的可视区域高度和宽度
            var client_w = page.clientWidth;
            var client_h = page.clientHeight;

            // 创建登陆框
            var oLogin = document.createElement("div");
            oLogin.id = "login";
            oLogin.innerHTML = "<div class='loginCon'><div id='close'>点击关闭</div></div>";

            //插入创建的登陆框
            document.body.appendChild(oLogin);

            //获取登陆框的宽和高
            var dHeight = oLogin.offsetHeight;   // 获取登陆框的高度
            var dWidth = oLogin.offsetWidth;      // 获取登陆框的宽度

            //设置登陆框位置水平垂直居中
            oLogin.style.left = client_w / 2 - dWidth / 2 + "px";
            oLogin.style.top = client_h / 2 - dHeight / 2 + "px";  //设置登陆框top值
            
            //点击关闭按钮，点击登陆框以外的区域也可以关闭登陆框
            var oClose = document.getElementById("close");
            mask.onclick = oClose.onclick = function () {
                document.body.removeChild(mask);
                document.body.removeChild(oLogin);
            }

           
        }

        //加载后，点击登录按钮后，弹出遮罩和登录框
        window.onload = function () {
            var oBtn = document.getElementById("btnLogin");
            //点击登录按钮
            oBtn.onclick = function () {
                //执行openNew函数
                openNew();
            }
        }

    </script>
</head>

<body>
    <div id="header">
        <div class="container" id="nav">
            <h1 id="logo"><a href="#">慕课网</a></h1>
            <ul class="l" id="nav-item">
                <li> <a href="#">课程</a> </li>
            </ul>
            <div id="login-area">
                <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
            </div>
        </div>
    </div>

    <div id="main">
        <div class="slider-container">
            <div id="slider">
                <ul id="sliderUl">
                    <li id="bg01"></li>
                </ul>
                <div id="dotBox"><span class=""></span><span class="active"></span><span class=""></span></div>
            </div>
            <div id="discripcontainer">
                <div class="discripbg"></div>
                <div class="discrip">
                    <h3>换一种方式</h3>
                    <h2>来学习互联网编程</h2>
                    <h4>超酷的IT技术免费学习平台</h4>
                    <div class="btnarea"> <a id="enterbtn" href="#">进入</a> <a id="learnmore"
                            href="javascript:;">了解更多</a> </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>